<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>古驰首页</title>
  <style>
    .bg-big{
      width: 100vw;
      height: 42vw;
      background-image: url(./guc_img/16369726120031176.jpg);
      background-size: 100vw 42vw;
      background-repeat: no-repeat;
    }
    .bg-big>div:nth-child(1){
      width: 100vw;
      height: 5vw;
      display: flex;
      background: #1b1b1b2a;
    }
    .bg-big div img:nth-child(1){
      width: 14px;
      height: 14px;
      margin: 2vw 7vw 7vw 3vw;
      
    }
    .bg-big div img:nth-child(2){
      width: 9vw;
      height: 1.3vw;
      margin: 1.5vw auto;
      min-width: 95px;
      min-height: 15px;
      position: relative;
      right: 5vw;
    }
    .bg-big>div:nth-child(2){
      width: 100vw;
      height: 20vw;
      background: #1b1b1b11; 
    }
    .bg-big>div:nth-child(3){
      margin: -5vw 0 10px;
      text-align: center;
      font-size: 4.0vw;
      color: white;
      background: #1b1b1b07;
    }
    .bg-big button{
      width: 12vw;
      height: 3vw;
      display: block;
      margin:2vw auto;
      font-size: 0.5vw; 
      min-width: 65px;
      min-height: 35px;
      text-align: center;
      transform: translateY(7vw);
    }
    .container .zdy-tu img{
      width: 23vw;
      height: 23vw;
      background-color: #ddd;
    }
    .container{
      overflow: hidden;
    }
    @keyframes move{
      0%{transform: translateX(0);}
      100%{transform: translateX(-150%);}
    }
    .container .zdy-tu{
      animation: move 3s linear infinite;
    }
    .container .zdy-tu:hover{
      animation-play-state: paused;
    }
    .container h2{
      margin-top: 10vw;
    }
    .container p{
      font-size: 20px;
    }
    .zdy-tu2>div:nth-child(4),.zdy-tu4 p{
      font-size: 45px;
      color: white;
      transform: translate(500px,-140px);
    }
    .zdy-tu2>div:nth-child(5) a,.zdy-tu4 div a{
      color: white;
    }
    .zdy-tu2>div:nth-child(5),.zdy-tu4 div{
      transform: translate(46%,-120px);
    }
    .zdy-tu3 img{
      width: 15vw;
      height: 15vw;
      min-width: 163px;
      min-height: 163px;
      margin: 10px;
    }
    .zdy-tu3 li p{
      font-size: 12px;
      text-align: center;
    }
    .zdy-tu3 ul{
      transform: translateY(-120px);
    }
    .zdy-tu3 button{
      width: 160px;
      height: 40px;
      transform: translateY(-60px);
    }
    .zdy-tu5{
      transform: translateY(-100px);
    }
    #text1{
      margin: -5vw 0 10px;
      text-align: center;
      font-size: 4.0vw;
      color: white;
      background: #1b1b1b07;
      transform: translateY(20vw);
    }
    .zdy-tu6>div>div{
      margin-bottom: 150px;
      font-size: 20px;
    }
    .zdy-tu6>div>div::before{
      content: "\E657";
    }
    .footer{
      background-image: url(./guc_img/u=1436480590\,3279124886&fm=26&fmt=auto.webp);
      width: 73vw;
      height: 40vw;
      max-width: 1146.09px;
      max-height: 628px;
      margin: auto;
      transform: translateY(50px);
      background-size: cover;
    }
    .footer>div{
      width: 70%;
      height: 60%;
      background-color:rgba(53,51,51,0.7);
      margin: auto;
      transform: translateY(7vw);
    }
    .footer .top>img{
      width: 48px;
      height: 48px;
    }
    .footer .top{
      border-bottom: 1px solid white;
    }
    .footer .center>div p{
      font-size: 16px;
      background-color:white;
    }
    .footer .center>div{
      background-color: rgba(255,255,255,0.25);
      width: 85%;
    }
    .footer .center>p{
      font-size: 16px;
    }
    .zdy-logo img{
      width: 24px;
      height: 24px;
    }
    .footer{
      transform: translateY(-1%);
    }
    .zxgw{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 50vh;
    }
    @media (max-width:1414px) {
      .footer .center{
        display: none;
      }
    }
    @media (max-width:500px) {
      @keyframes move{
      0%{transform: translateX(0);}
      100%{transform: translateX(-100%);}
    }
    }
  </style>
</head>

<body>
  <div class="bg-big" id="bg">
    <div>
      <img src="./guc_img/landingPage-homeIcon.png" alt="">
      <img src="./guc_img/landingPage-navbar-logo.png" alt="">
    </div>
    <div id="text1">The Hacker Project</div>
    <button class="btn btn-dark">即刻探索</button>
    <div></div>
  </div>
  <div class="container">
    <div class="d-flex zdy-tu">
      <div class="row m-auto ">
        <div class="col-4">
          <img src="./guc_img/1636982366275222.png" alt="" class="border mt-3 mr-sm-1">
        </div>
      </div>
      <div class="row m-auto">
        <div class="col-4">
          <img src="./guc_img/16369821841537755.png" alt="" class="border mt-3 mr-sm-1 ">
        </div>
      </div>
      <div class="row m-auto">
        <div class="col-4">
          <img src="./guc_img/16377333186508773.png" alt="" class="border mt-3 mr-sm-1 ">
        </div>
      </div>
      <div class="row m-auto">
        <div class="col-4">
          <img src="./guc_img/16369820261131136.png" alt="" class="border mt-3 mr-sm-1 ">
        </div>
      </div>
      <div class="row m-auto">
        <div class="col-4">
          <img src="./guc_img/1636982050349783.png" alt="" class="border mt-3 mr-sm-1 ">
        </div>
      </div>
      <div class="row m-auto">
        <div class="col-4">
          <img src="./guc_img/16369820775308387.png" alt="" class="border mt-3 mr-sm-1 ">
        </div>
      </div>
    </div>
    <div class="zdy-tu2">
      <h2 class="text-center">手袋系列</h2>
      <p class="text-center mb-5">H A N D B A G</p>
      <img src="./guc_img/16369716856942877.jpg" alt="" class="m-auto w-100 h-25 d-block">
      <div>女士</div>
      <div><a href="#">即刻探索></a></div>
    </div>
    <div class="zdy-tu3">
      <ul class="row list-unstyled d-flex justify-content-between">
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369729661647374.png" alt="" class="ml-0">
          <p>竹节迷你手提包</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369819148594247.png" alt="" class="ml-0">
          <p>饰超级双G图案竹节迷你手袋</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369734257708482.png" alt="" class="ml-0">
          <p>GG Marmont系列迷你肩背包</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369735197161257.png" alt="" class="ml-0">
          <p>Gucci 马衔扣1955系列小号肩背包</p>
        </li>
      </ul>
      <button class="btn btn-dark d-block m-auto">浏览更多</button>
    </div>
    <div class="zdy-tu4">
      <img src="./guc_img/16369717685764090.jpg" alt="" class="m-auto w-100 h-25 d-block ">
      <p>男士</p>
      <div><a href="#">即将探索></a></div>
    </div>
    <div class="zdy-tu3">
      <ul class="row list-unstyled d-flex justify-content-between">
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369742659721894.png" alt="" class="ml-0">
          <p>饰超级双G图案托特包</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369743595561308.png" alt="" class="ml-0">
          <p>Gucci 马衔扣1955系列迷你手袋</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369744576679950.png" alt="" class="ml-0">
          <p>GG Supreme帆布腰包</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16356871929552188.png" alt="" class="ml-0">
          <p>GG邮差包</p>
        </li>
      </ul>
      <button class="btn btn-dark d-block m-auto">浏览更多</button>
    </div>
    <div class="zdy-tu2 zdy-tu5">
      <h2 class="text-center">鞋履系列</h2>
      <p class="text-center mb-5">S H O E S</p>
      <img src="./guc_img/16369720543679539.jpg" alt="" class="m-auto w-100 h-25 d-block">
      <div></div>
      <div><a href="#">即刻探索></a></div>
    </div>
    <div class="zdy-tu3 zdy-tu6">
      <div class="d-flex mb-5 text-center">
        <div class="w-50 ">
          <a href="#u1" class="text-secondary">女士推荐</a>
        </div>
        <div class="w-50 ">
          <a href="#u2" class="text-secondary">男士推荐</a>
        </div>
      </div>
      <ul class="row list-unstyled d-flex justify-content-between" id="u1">
        <li class="col-6 col-md-3">
          <img src="./guc_img/16356872396654399.png" alt="">
          <p>女士双G乐福鞋</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16356872659323133.png" alt="">
          <p>女士链条切尔西短靴</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16356873655426661.png" alt="">
          <p>女士织带运动鞋</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/1635687415906143.png" alt="">
          <p>GG 系列运动鞋</p>
        </li>
      </ul>
      <ul class="row list-unstyled d-flex justify-content-between" id="u2">
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16356872396654399.png" alt="">
          <p>女士双G乐福鞋</p>
        </li>
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16356872659323133.png" alt="">
          <p>女士链条切尔西短靴</p>
        </li>
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16356873655426661.png" alt="">
          <p>女士织带运动鞋</p>
        </li>
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/1635687415906143.png" alt="">
          <p>GG 系列运动鞋</p>
        </li>
      </ul>
      <button class="btn btn-dark d-block m-auto">浏览更多</button>
    </div>
    <div class="zdy-tu2 zdy-tu5">
      <h2 class="text-center">服饰系列</h2>
      <p class="text-center mb-5">R E A D Y － T O － W E A R</p>
      <img src="./guc_img/16369722278857461.jpg" alt="" class="m-auto w-100 h-25 d-block">
      <div></div>
      <div><a href="#">即刻探索></a></div>
    </div>
    <div class="zdy-tu3 zdy-tu6">
      <div class="d-flex mb-5 text-center">
        <div class="w-50 ">
          <a href="#u1" class="text-secondary">女士推荐</a>
        </div>
        <div class="w-50 ">
          <a href="#u2" class="text-secondary">男士推荐</a>
        </div>
      </div>
      <ul class="row list-unstyled d-flex justify-content-between" id="u1">
        <li class="col-6 col-md-3">
          <img src="./guc_img/1636975822348330.png" alt="">
          <p>单排扣天鹅绒夹克</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369759277706276.png" alt="">
          <p>弹力天鹅绒喇叭裤</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369760630465820.png" alt="">
          <p>互扣式双G双面羊毛开衫</p>
        </li>
        <li class="col-6 col-md-3">
          <img src="./guc_img/16369762017499940.png" alt="">
          <p>Gucci复古标识卫衣</p>
        </li>
      </ul>
      <ul class="row list-unstyled d-flex justify-content-between" id="u2">
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16369762948006561.png" alt="">
          <p>织带绞花编织毛衣</p>
        </li>
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16369763702236292.png" alt="">
          <p>饰超级双G图案帆布夹克</p>
        </li>
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16369825343385804.png" alt="">
          <p>镜像效果Gucci印花针织卫衣</p>
        </li>
        <li class="col-6 col-md-3 d-none">
          <img src="./guc_img/16356906038522349.png" alt="">
          <p>防水羽绒夹克</p>
        </li>
      </ul>
      <button class="btn btn-dark d-block m-auto">浏览更多</button>
    </div>
    <div class="zdy-tu2 zdy-tu5 footer">
      <div>
        <div class="top d-flex p-3">
          <img src="./guc_img/gucci-logo.png" alt="">
          <div>
            <div class="text-white mb-sm-3 ml-sm-1">Gucci 专属时尚顾问</div>
            <div class="bg-white rounded p-2 m-auto d-none d-sm-block">欢迎光临GUCCI官网，期待与您一同探索奇妙浪漫的古驰世界，邂逅您的心仪商品。</div>
          </div>
        </div>
        <div class="center p-3 ml-5 d-none d-sm-block">
          <p class="text-white">您可以点击以下问题开启对话</p>
          <div class="rounded p-2">
            <p class="w-50 rounded">
              <span class="rounded-circle badge-dark mr-3">Q1</span>
              <span>最近有什么新品？</span>
            </p>
            <p class="w-50 rounded">
              <span class="rounded-circle badge-dark mr-3">Q2</span>
              <span>
                商品使用的是什么包装？
              </span>
            </p>
            <p class="w-50 rounded">
              <span class="rounded-circle badge-dark mr-3">Q3</span>
              <span>现在下单，什么时候可以发货？</span>
            </p>
          </div>
        </div>
        <div class="text-center text-white">联系客服 ></div>
      </div>
    </div>
    <div class="mt-5 zdy-logo">
      <img src="./guc_img/backIcon.png" alt="" class="d-block m-auto">
      <div class="text-center mt-1"><a href="#bg" class="text-secondary">回到顶部</a></div>
    </div>
    <div class="zxgw">
      <div class="bg-dark text-white d-flex justify-content-between p-3">在线顾问<span>﹀</span></div>
    </div>
  </div>
</body>

</html>